<template>

    <div class="globalindex">
        <div style="display: flex;margin-bottom: 10px;">
            <el-upload class="avatar-uploader" style="margin-right: 10px;" :accept="accept" :show-file-list="false"
                :http-request="addFile">
                <el-button type="primary" plain>上传</el-button>

            </el-upload>
            <el-button type="success" v-if="route.query.type == 'all'" @click="addfolder()" plain>新建文件夹</el-button>
            <el-button type="danger" @click="plmove()" :disabled="selectlist.length == 0" plain>批量移动</el-button>
            <el-button type="warning" @click="plremove()" :disabled="selectlist.length == 0" plain>批量删除</el-button>
            <!-- <el-button type="danger" @click="addfolder()" plain>批量移动</el-button>
            <el-button type="warning" @click="addfolder()" plain>批量删除</el-button> -->
        </div>
        <Bread v-if="params.filePid !== 0" @getlist="gettable" @goback="goback" ref="breadRef"></Bread>
        <Table :data="tableData" @getFile="getFile" @move="move" @getlist="gettable" @selectchange="selectchange"
            @share="share" @getcurfolder="getcurfolder" ref="tableRef"></Table>
        <Pagnition @changepage="changelist" :params="params" :total="total"></Pagnition>
        <MoveDialog ref="moveRef" @getlist="getlists"></MoveDialog>
        <Picture ref="PictureRef"></Picture>
        <ShareDialog ref="ShareRef"></ShareDialog>
    </div>
</template>
<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import Bread from "@/component/Bread.vue"
import MoveDialog from "@/component/MoveDialog.vue"
import Pagnition from "@/component/Pagnition.vue"
import Table from '@/component/Table.vue';
import service from '@/utils/Request';
import Picture from "@/component/Picture.vue"
import { onMounted, ref, watch } from 'vue';
import ShareDialog from "@/component/ShareDialog.vue"
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter()
const selectlist = ref([])
const PictureRef = ref(null)
const tableData = ref([])
const tableRef = ref(null)
const ShareRef = ref(null)
const moveRef = ref(null)
console.log(route.query)
const curfolder = ref(0)
const accept = ref("");
const total = ref(0)
const emit = defineEmits(["addFile"])
const addFile = (e) => {
    emit("addFile", e, curfolder.value);
}
const breadRef = ref(null)
const params = ref({
    pageNo: 1,
    pageSize: 10
})
const getcurfolder = (e) => {
    curfolder.value = e
    console.log(curfolder.value, "curfolder")
    params.value.filePid = e

}
const share = (row) => {
    console.log(row)
    ShareRef.value.open(row)
}
watch(() => route.query, (newValue, oldValue) => {
    console.log('sum被修改了', newValue, oldValue)
    params.value.category = newValue.type
    if (newValue.path) {
        params.value.filePid = newValue.path
        getfolder()
    } else {
        params.value.filePid = 0
    }
    if (newValue.type == 'image') {
        accept.value = ".jpg,.png,.jpeg"
    } else if (newValue.type == 'video') {
        accept.value = ".mp4"

    } else if (newValue.type == 'zip') {
        accept.value = ".exe,.zip,.rar"

    } else {
        accept.value = ""
    }

    getlist()
})
const getfolder = () => {
    breadRef.value.getfolder()
}
const changelist = (e) => {
    console.log(e)
    params.value.pageNo = e.pageNo,
        params.value.pageSize = e.pageSize;
    gettablelist()
}
const move = (row) => {
    let data = [];
    let datas = [];
    data = [curfolder.value]
    datas.push(row.fileId);
    moveRef.value.open(data, datas)
}
const plmove = () => {
    let data = [];
    let datas = [];
    data = [curfolder.value]
    selectlist.value.forEach(el => {
        if (el.folderType == 1) {
            data.push(el.fileId)
        }
        datas.push(el.fileId);
    })

    moveRef.value.open(data, datas)
}
const selectchange = (e) => {

    console.log(e, "ed")
    selectlist.value = e
}
const plremove = () => {
    ElMessageBox.confirm(
        `是否确认删除${selectlist.value[0].fileName}等${selectlist.value.length}个文件?`,
        'Warning',
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }
    )
        .then(async () => {

            let data = [];
            selectlist.value.forEach(el => {
                data.push(el.fileId)

            })
            const res = await service.post("/file/delFile", {
                fileIds: data.join(",")
            })
            console.log(res);
            gettablelist()

            ElMessage({
                type: 'success',
                message: 'Delete completed',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            })
        })
}
const addfolder = () => {
    tableRef.value.addfolder(curfolder.value)
}
const getlist = async () => {
    params.value.category = route.query.type

    if (route.query.path) {
        let pathlist = [];
        pathlist = route.query.path.split("/");
        params.value.filePid = pathlist[pathlist.length - 1]
        curfolder.value = pathlist[pathlist.length - 1]
    } else {
        params.value.filePid = 0
        curfolder.value = 0
    }
    setTimeout(() => {
        gettablelist()
    }, 100)
}
const goback = () => {
    getlist()
}
const gettablelist = async () => {
    console.log(params.value, "pars")
    const res = await service.post("/file/loadDataList", params.value);
    console.log(res, "res")
    total.value = res.data.total
    tableData.value = res.data.records
    tableRef.value.getlist()
}
const gettable = () => {
    params.value.filePid = 0
    curfolder.value = 0
    setTimeout(() => {
        gettablelist()
    }, 100)

}
const getlists = () => {
    setTimeout(() => {
        gettablelist()
    }, 100)
}
defineExpose({
    getlist
})
onMounted(() => {
    console.log(route.query.type)
    params.value.category = route.query.type
    getlist()
    getfolder()
})
const getFile = (row) => {

    PictureRef.value.open(row)
}
</script>
<style scoped>
.globalindex {
    width: 100%;
    height: 100%;
}
</style>